<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<!--先写图片的显示，隐藏效果，再追加控制和计时器和延时器-->
	<!--建立显示和关闭方法-->

</head>
<!--大概有基础后写style代码-->
<style type="text/css">
	div#adDiv {
		width: 2000px;
		height: 400px;
		position: fixed;
	}

	div#switchDiv {
		width: 100px;
		line-height: 200px;
		position: absolute;
		right: 0;
		top: 0;
	}
</style>
<script type="text/javascript">
	//		为什么用立即执行函数来建立方法?
	//		因为立即执行函数在执行后会被销毁,清理出内存
	//不按照教程来,先从显示/隐藏开始
	//1.先写关闭的方法，使用window。onload方法包裹函数


	window.onload = function () {

		var closeAd = document.querySelector('input');
		var adObj = document.getElementById('adDiv');
		closeAd.onclick = function () {
			adObj.style.display = 'none';
		}

		//     第一步完成,现在做显示/隐藏图层 

		var show = document.getElementById('switchDiv');
		show.onclick = function () {
			//          	在这里不用document方法,直接获取style对应的值
			adObj.style.display == "none" ? adObj.style.display = "block" : adObj.style.display = "none";

//			console.log(adObj.style.display)
			//          	试用queryelements方法取input的值
			//              var sr=document.querySelector('#switchDiv');
			//              sr.value=='隐藏图层'?sr.value='显示图层':sr.value='隐藏图层';
		}
	}
</script>

<body>
	<input type="button" id="switchDiv" value="隐藏图层" />
	<div id="adDiv" style="height: 400px;">
		<img src="img/12.jpg" width="600px" />
		<!--图层里面再镶嵌一个用来关闭的div-->
	</div>

</body>
<script type="text/javascript">
	console.log(adobj.style.display);
	console.log(typeof adDiv.style.display);
</script>

</html>